<template>
  <div class="gpt-draw-records">
    <div v-for="item in drawRecords" :key="item.id" class="draw-item">
      <div class="time">{{ item.generateTime }}</div>
      <div class="prompt-wrap" :title="item.prompt" @click="showParameterModal(item.id)">
        <div class="w-955 prompt">提示词 Prompt：{{ item.prompt }}</div>
        <img class="w-18 h-18 ml-12" src="@/assets/img/admin/learning-case/arrow-right-s-line.svg" alt="" />
      </div>
      <a-image-preview-group>
        <div class="image-list" name="childGroup">
          <div v-for="(detailsEvaluate, index) in item.detailsEvaluateList" :key="index" class="image-wrap">
            <a-image class="image fallback" :fallback="imgFallback" :src="detailsEvaluate.imgPath" alt="" />
            <div class="img-bgc" :style="{ backgroundImage: `url(${detailsEvaluate})` }"></div>
          </div>
        </div>
      </a-image-preview-group>
    </div>

    <parameter-modal
      ref="parameterModalRef"
      :open="parameterModalShow"
      :detail-info="detailInfo"
      :model-list="modelList"
      @cancel="parameterModalShow = false"
    />
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue'

  import imgFallback from '@/assets/img/admin/learning-case/img-fallback.png'
  import { learningTasksManageApi } from '@/services/api'

  import { BaseModeldto } from '../../types/index'
  import { DrawRecords } from '../../types/index'
  import ParameterModal from '../parameter-modal/index.vue'
  const props = defineProps<{
    drawRecords: DrawRecords[]
  }>()

  const parameterModalShow = ref<boolean>(false)
  const detailInfo = ref<any>({})
  const modelList = ref<BaseModeldto[]>([])
  const showParameterModal = async (id: string): Promise<void | []> => {
    try {
      console.log('212222')
      const res = await learningTasksManageApi.queryParameter({ imgFlag: false, idType: 2 }, { urlParams: { id } })
      detailInfo.value = res.data?.sdGenerateDataVO || res.data?.mjgenerateDataVO
      // 给模型列表赋值
      if (!detailInfo.value) return []
      const tensorArtV1 = detailInfo.value
      modelList.value = []
      // 基础模型
      const overrideSettings = tensorArtV1?.overrideSettings
      if (overrideSettings) {
        modelList.value.push({
          cn: overrideSettings?.cn,
          type: overrideSettings?.type
        } as any)
      }
      if (tensorArtV1?.models?.length) {
        modelList.value.push(...tensorArtV1.models)
      }
      if (tensorArtV1?.embeddingModels?.length) {
        modelList.value.push(...tensorArtV1.embeddingModels)
      }
      console.log('data:', modelList.value, detailInfo.value)

      parameterModalShow.value = true
    } catch (error) {}
  }
</script>

<style lang="less" scoped>
  .gpt-draw-records {
    padding: 16px 32px;
    height: 100%;

    .draw-item {
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid @border1;
      color: rgba(17, 22, 31, 0.52);

      .time {
        line-height: 20px;
        font-size: 12px;
      }

      .prompt-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        margin: 12px 0;
        width: 100%;
        height: 26px;
        font-size: 12px;
        background: #fafafa;
        border-radius: 8px;
        line-height: 26px;
        cursor: pointer;

        .prompt {
          overflow: hidden;

          .elliptical-1();
        }
      }

      .image-list {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(5, 1fr);
        // 元素间距
        gap: 16px;

        .image-wrap {
          position: relative;
          overflow: hidden;
          // 元素高度和宽度比例 1： 1
          aspect-ratio: 1 / 1;
          flex-shrink: 0;

          :deep(.ant-image) {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            border-radius: 10px;

            .image {
              width: 100%;
              height: 100%;
              object-fit: contain;
              border-radius: 10px;
            }

            .ant-image-mask {
              border-radius: 10px;
            }
          }

          .img-bgc {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            overflow: hidden; /* 确保溢出的模糊效果被裁剪 */
            width: 100%;
            height: 100%;
            background: lightgray 50% / cover no-repeat;
            border-radius: 10px;
          }

          .img-bgc::before {
            position: absolute;
            inset: -100px; /* 根据模糊半径适当调整 */
            z-index: -1;
            background: inherit;
            filter: blur(30px);
            content: '';
          }
        }
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
</style>
